/*
  学习目标：在React中使用Redux
  卸载后数据不销毁, 挂载后显示原本的数据
  前置: 
    1. store/index.js 导出store
    2. 准备cv
  步骤:
*/
import { useState } from 'react';
import store from './store/index';
import { useEffect } from 'react';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  // 1. 从redux中获取count作为初始值
  const [count, setCount] = useState(store.getState().count);

  // 💥Redux只负责保存数据 计算数据, 不负责驱动视图
  // 💥React负责驱动视图
  useEffect(() => {
    // 3. 挂载后监听store数据变化, 同步count给React中的count
    const unFn = store.subscribe(() => {
      setCount(store.getState().count);
    });

    // 4. 卸载关闭监听
    return () => {
      unFn();
    };
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button
        // 2. 点击事件修改redux中的count
        onClick={() => store.dispatch({ type: 'add' })}
      >
        +1
      </button>
      <button onClick={() => store.dispatch({ type: 'des' })}>-1</button>
    </div>
  );
}
